<template>
  <div>
    <!-- 输入框 -->
    <el-input
        style="width:50%;margin-bottom: 10px"
        placeholder="请根据车牌号搜索内容"
        v-model="pagination.queryString"
        @change="search"
        clearable>
    </el-input>
    <el-button @click="CarList()" class="dalfBut">查询</el-button>
    <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>

    <!-- 数据单向绑定  :data表格数据 -->
    <el-table :data="dataList" border>
      <!-- prop属性  与此处数据的属性一致 -->
      <el-table-column prop="id"   label="车辆记录" width="100" ></el-table-column>
      <el-table-column prop="carNumber"   label="车牌号" width="100" ></el-table-column>
      <el-table-column prop="driverId"   label="员工号" width="100" ></el-table-column>
      <el-table-column prop="pay"   label="车辆租金" width="100" ></el-table-column>
      <el-table-column prop="type"   label="车辆类型" width="100" ></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="small" icon="el-icon-edit"   circle @click="handleUpdate(scope.row)" >编辑</el-button>
          <el-button type="danger"  size="small" icon="el-icon-delete" circle @click="handleDelete(scope.row)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页  :属性="" 单向数据绑定 -->
    <el-pagination
        class="pagiantion"
        @current-change="CarList"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>

    <!-- 新增标签弹层 -->
    <div class="add-form">
      <el-dialog title="新增车辆信息" :visible.sync="dialogFormVisible">
        <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="车牌号" prop="userName">
                <el-input v-model="formData.carNumber">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="员工编号" prop="userName">
                <el-input v-model="formData.driverId">
                </el-input>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="车辆租金" prop="userPhone">
                <el-input v-model="formData.pay">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车辆类型" prop="userAddress">
                <el-input v-model="formData.type">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAdd()">确定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 编辑标签弹层 -->
    <div class="add-form">
      <el-dialog title="编辑检查项" :visible.sync="dialogFormVisibleEdit">
        <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="车牌号" prop="userName">
                <el-input v-model="formData.carNumber">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="员工编号" prop="userName">
                <el-input v-model="formData.driverId">
                </el-input>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="车辆租金" prop="userPhone">
                <el-input v-model="formData.pay">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车辆类型" prop="userAddress">
                <el-input v-model="formData.type">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleEdit = false">取消</el-button>
          <el-button type="primary" @click="handleEdit()">确定</el-button>
        </div>
      </el-dialog>

    </div>

  </div>
</template>

<script>
export default {
  name: "CarView",
  data() {
    return {
      pagination: {       //分页相关模型数据
        currentPage: 1, //当前页码
        pageSize: 4,    //每页显示的记录数
        total: 100,        //总记录数
        queryString: ""//查询条件
      },
      dataList: [],
      formData:{},
      dialogFormVisible: false,//增加表单不可见
      dialogFormVisibleEdit: false,
      rules: {//校验规则
        carNumber: [{ required: true, message: '车牌号为必填项', trigger: 'blur' }],
        driverId: [{ required: true, message: '员工编号为必填项', trigger: 'blur' }],
        pay:[{ required: true, message: '员工编号为必填项', trigger: 'blur' }],
        type:[{ required: true, message: '车辆类型为必填项', trigger: 'blur' }]

      }
    }
  },
  created() {
    this.CarList()
  },
  methods:{
    //若没有传递当前页码 ， 默认展示第一页
    CarList(page = 1) {
      this.pagination.currentPage = page
      let param= {
        currentPage: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        queryString: this.pagination.queryString
      }
      axios.get('http://localhost:8099/car/findPage', {params: param})
          .then(response => {  //response.data.data 等价于 Map 有PageInfo&query
            console.log(response)
            this.pagination.total = response.data.total
            this.dataList = response.data.records
          })
          .catch(error => {
            console.log(error)
          })
    },
    resetForm(){
      this.formData={}
    }
    ,
    handleCreate(){
      this.resetForm()
      this.dialogFormVisible=true
    },
    handleAdd() {
      this.$refs["dataAddForm"].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false
          axios.post('http://localhost:8099/car/add', this.formData).then(response => {
            if (response.data.code == 200) {
              this.$message.success(response.data.message);
            } else {
              this.$message.error(response.data.code);
            }
            this.OrderList()
          })
        } else {
          this.$message.error("表单验证失败");
          return false;
        }
      })
    },
    //弹出编辑窗口
    search(){
      this.CarList()
    },
    handleUpdate(row){
      axios.get(`http://localhost:8099/car/${row.id}`).then(response=> {
        if (response.data.code==200){
          this.dialogFormVisibleEdit=true
          this.formData=response.data.data
        }else {
          this.$message.error(response.data.code)
        }
      })
    },
    //编辑完成
    handleEdit(){
      //校验表单
      this.$refs["dataEditForm"].validate((valid)=>{
        if (valid){
          this.dialogFormVisibleEdit=false
          axios.post('http://localhost:8099/car/update',this.formData).then(response=>{
            if (response.data.code==200){
              this.$message.success(response.data.message)
            }else {
              this.$message.error(response.data.code)
            }
          })
        }else {
          this.$message.error('表单校验失败')
          return false
        }
      })
      location.reload()
    },
    handleDelete(row){
      this.$confirm('是否删除此车辆信息？','提示',{type:'warning'}).then(()=>{
        axios.delete(`http://localhost:8099/car/delete/${row.id}`).then(response=>{
          if (response.data.code==200){
            this.$message.success(response.data.message);
            this.AdminList()
          }else {
            this.$message.error(response.data.code);
          }
        })
      })
    }
  }

}
</script>

<style scoped>

</style>